<template>
	<view class="formpanel">
		<form @submit="formSubmit">
			<view class="group border-tb">违停车辆信息</view>
			<view class="cu-form-group border-b">
				<view class="title">车牌号</view>
				<view class="text"><input name="CarNum" placeholder="请输入车牌号或拍照识别" placeholder-class="gray" disabled="true" :value="Info.CarNum"  @tap="CarnoTap"></input></view>
				<!--#ifdef APP-->
				<view class="icon" @click="GetCarNum"><image src="/static/scancar.png" /></view>
				<!--#endif-->
				<!--#ifdef MP-WEIXIN-->
				<ocr-navigator @onSuccess="ScanSuccess" certificateType="platenum" :opposite="false" class="icon" data-com-type="wx"><image src="/static/scancar.png" /></ocr-navigator>
				<!--#endif-->
			</view>
			<view class="cu-form-group border-b">
				<view class="title">车辆颜色</view>
				<view class="text">
					<input name="CarColor" placeholder="请选择车辆颜色" placeholder-class="gray" disabled="true" :value="Info.CarColor" @tap="ShowCarColor" />
				</view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title">车辆类型</view>
				<view class="text">
					<picker @change="CarTypeChange" :value="Tools.findStringIndex(CarTypeList,Info.CarType)" :range="CarTypeList">
						<view class="uni-input">
							{{Info.CarType}}<input name="CarType" Stage="text" class="hidden" :value="Info.CarType"/>
						</view>
					</picker>
				</view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title">违停地点</view>
				<view class="text"><input name="Address" placeholder="请输入或选择违停地点" placeholder-class="gray" :value="Info.Address" @input="AddressInput"></input><input name="Lat" type="text" class="hidden" :value="Info.Lat"></input><input name="Lng" type="text" class="hidden" :value="Info.Lng"></input></view>
				<view class="icon" @click="ChooseAddress(Info.Lat, Info.Lng)"><image src="/static/address.png" /></view>
			</view>
			
			<view class="group border-tb">执法人员</view>
			<view class="cu-form-group border-b">
				<view class="title">主办人</view>
				<view class="text">
					<picker @change="ZBRRealNameChange" :value="Tools.findLawNumIndex(UserList1, Info.ZBRLawNum)" :range="UserList1" range-key="RealName"> 
						<view class="uni-input">
							{{UserList1[Tools.findLawNumIndex(UserList1,Info.ZBRLawNum)].RealName}}
						</view>
					</picker>
				</view>
			</view>
			<view class="cu-form-group border-b">
				<view class="title">协办人</view>
				<view class="text">
					<picker @change="XBRRealNameChange" :value="Tools.findLawNumIndex(UserList2, Info.XBRLawNum)" :range="UserList2" range-key="RealName">
						<view class="uni-input">
							{{UserList2[Tools.findLawNumIndex(UserList2,Info.XBRLawNum)].RealName}}
						</view>
					</picker>
				</view>
			</view>
			<view class="group border-tb">当事人信息</view>
			<view class="cu-form-group border-b">
				<view class="title">联系电话</view>
				<view class="text"><input name="Mobile" type="number" placeholder="请输入被处罚人联系电话" placeholder-class="gray" :value="Info.Mobile"></input></view>
			</view>
			<view class="group">现场照片 <text class="number">{{OldList.length+ImgList.length}}/9</text></view>
			<view class="imglist">
				<view class="img" v-for="(img,index) in OldList" @click="PrevImg(OldList, index)"><image :src="Tools.GetImg(img,200)" mode="aspectFill"/><view class="delete" @click="DeleteImg1(index)" @click.stop="" v-if="Info.State==0"><image src="/static/error.png"/></view></view>
				<view class="img" v-for="(img,index) in ImgList" @click="PrevImg(ImgList, index)"><image :src="img" mode="aspectFill"/><view class="delete" @click="DeleteImg2(index)" @click.stop="" v-if="Info.State==0"><image src="/static/error.png"/></view></view>
				<view class="img bd" @click="ChooseImg" v-if="Info.State==0"><image src="/static/addphoto.png" /></view>
			</view>
			<template v-if="false">
			<view class="group">当事人签字 <text class="resign" v-if="Info.State==0 && ID>0 && Info.SignName!=''" @click="SignName">重新签字</text></view>
			<view class="signlist">
				<view class="signname" v-if="Info.State==0 && Info.SignName==''" @click="SignName">点此签字</view>
				<image v-else :src="Tools.GetImg(Info.SignName,500)" mode="aspectFit" @click="SignName"></image>
			</view>
			</template>
			<view class="btn">
				<button class="publishs" form-type="submit" v-if="Info.State==0">确定</button>
				<!--执法人员撤销，等于直接删除-->
				<button class="deletes" v-if="Info.ID>0 && Info.State==0 && IsAdmin==0 && IsOutTime==0" @click="Delete()">撤销</button>
				<!--领导撤销-->
				<button class="deletes" v-if="Info.ID>0 && Info.State==0 && IsAdmin==1" @click="Cancel()">撤销</button>
				<button class="pay" v-if="Info.ID>0 && Info.State==0 && IsPay==1" @click="Pay()">缴费</button>
				<button class="print" v-if="Info.ID>0" @click="Print">打印</button>
			</view>
		</form>
		<!-- 键盘 -->
		<maplemei-keyboard :show="Show" :value="Info.CarNum" @submit="CarnoSubmit" @close="Show = false" :defaultType="1"></maplemei-keyboard>
		<uni-popup ref="popup" type="bottom" backgroundColor="#ffffff">
		 	<view class="sheetmenu border-b" @click="GaoZhiDan">违法停车告知单</view>
		 	<view class="sheetmenu border-b" @click="JueDingShu">违法停车处罚决定书</view>
		 	<view class="sheetmenu" @click="Close">取消</view>
		</uni-popup>
		<uni-popup ref="carcolor" type="bottom" backgroundColor="#ffffff">
			<view class="square">
				<view class="list" @click="ChangeColor(item)" v-for="item in CarColorList">{{item}}</view>
			</view>
		 	<view class="sheetmenu border-t" @click="CloseCarColor">取消</view>
		</uni-popup>
	</view> 
</template>

<script>
	import maplemeiKeyboard from '@/components/maplemei-keyboard/maplemei-keyboard.vue'
	//#ifdef APP
	const sealOcrModule = uni.requireNativePlugin('Seal-OCR')
	//#endif
	export default {
		components: {
		    maplemeiKeyboard
		},
		data() {
			return {
				ID:0,
				Info:{ID:0},
				Admin:{},
				Count:0,
				ParkPrint:'',
				ParkWhich:'1',
				Chapter:'',
				IsOutTime:1,
				CarColorList:[],
				CarTypeList:[],
				UserList1:[{ID:0,RealName:"请选择主办人"}],
				UserList2:[{ID:0,RealName:"请选择协办人"}],
				OldList:[],
				ImgList:[],
				Show:false,
				IsAdmin:0, //管理员拥有撤销权限
				IsPay:0 //是否拥有缴费权限
			};
		},
		onShow() {
			this.Count++;
			if(this.Count>=2){
				setTimeout(()=>{
					this.Util.HideLoading();
				},3000);
			}
		},
		onLoad(options) {
			//监听生成签字的图片地址
			uni.$on('q-sign',path =>{
				this.Util.Loading("请稍候...");
				this.Util.OneUpload(path,"upload_file_signname",img=>{
					this.Info.SignName=img;
					this.SaveSignName(img);
				});
			});
			this.ID=options.ID;
			this.Find_ParkInfo();
		},
		onUnload() {
			uni.$off('q-sign') //移除监听事件
		},
		methods:{
			SignName(){
				// uni.navigateTo({
				// 	url:'signname'
				// })
				if(this.Info.State==0){
					uni.navigateTo({
						url:'/uni_modules/q-sign/q-sign'
					})
				}
			},
			SaveSignName(SignName){
				var data={};
				data.Act="Save_ParkSignName";
				data.ID=this.ID;
				data.SignName=SignName;
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						this.Util.Toast(json.Msg);
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			},
			GetCarNum() {
				this.Count++;
				setTimeout(()=>{
					this.Util.Loading("识别中...");
				},1000);
				sealOcrModule.ocr({ocrType: 'license_plate',scaleWidth: 0.01,scaleHeight: 0.3,albumEnable: false}, res => {
					    this.Info.CarNum=res.ocrResult.words_result.number;
						this.Init_Park();
						this.Util.HideLoading();
						this.Util.Toast("识别成功");
				    }
				)
			},
			ScanSuccess(res){
				this.Info.CarNum = res.detail.number.text;
				this.Init_Park();
				this.Util.Toast("识别成功");
			},
			CarnoTap(){
				uni.hideKeyboard();
				this.Show = true;
			},
			CarnoSubmit(val){
				this.Info.CarNum = val;
				this.Init_Park();
			},
			Print(){
				if(this.ParkWhich=="1"){
					this.GaoZhiDan();
				}
				else if(this.ParkWhich=="2"){
					this.JueDingShu();
				}else{
					this.$refs.popup.open();
				}
			},
			Close(){
				this.$refs.popup.close();
			},
			GaoZhiDan(){
				this.Close();
				uni.navigateTo({
					url:"parkprintnotice_"+this.ParkPrint+"?ID="+this.Info.ID
				})
			},
			JueDingShu(){
				this.Close();
				uni.navigateTo({
					url:"parkprintdecide_"+this.ParkPrint+"?ID="+this.Info.ID
				})
			},
			ShowCarColor(){
				uni.hideKeyboard();
				this.$refs.carcolor.open();
			},
			CloseCarColor(){
				this.$refs.carcolor.close();
			},
			ChangeColor(CarColor){
				this.Info.CarColor=CarColor;
				this.CloseCarColor();
			},
			AddressInput(e){
				this.Info.Address = e.detail.value;
			},
			AFAddressInput(e){
				this.Info.AFAddress = e.detail.value;
			},
			PersonTypeChange(e){
				this.Info.PersonType = parseInt(e.detail.value);
			},
			CarColorChange(e){
				this.Info.CarColor=this.CarColorList[e.detail.value];
			},
			CarTypeChange(e){
				this.Info.CarType=this.CarTypeList[e.detail.value];
			},
			ZBRRealNameChange(e){
				this.Info.ZBRRealName=this.UserList1[e.detail.value].RealName;
				this.Info.ZBRLawNum=this.UserList1[e.detail.value].LawNum;
			},
			XBRRealNameChange(e){
				this.Info.XBRRealName=this.UserList2[e.detail.value].RealName;
				this.Info.XBRLawNum=this.UserList2[e.detail.value].LawNum;
			},
			ScanIdCard(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera'], //从相册选择
				    success: res=> {
						var ImgList = res.tempFilePaths;
						this.Util.Loading("识别中...");
						this.Util.ScanUpload(ImgList[0],"upload_file_x",json=>{
							this.Util.HideLoading();
							this.Info.RealName=json.RealName;
							if(this.Info.PersonType==1){
								this.Info.IDCard=json.IdCard;
							}
							this.Util.Toast("识别成功");
						});
				    }
				});
			},
			ChooseAddress(Lat, Lng){
				//#ifdef APP
				uni.getLocation({
					type: 'gcj02',
					success: curr=> {
						uni.chooseLocation({
							latitude: Lat == 0 ? curr.latitude : Lat,
							longitude:Lng == 0 ? curr.longitude : Lng,
							success: res=> { 
								this.Info.Lat=res.latitude;
								this.Info.Lng=res.longitude;
								this.Info.Address=res.address.replace(res.name,'')+res.name;
							},fail(res) {
								console.log(res);
							}
						});
					}
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.chooseLocation({
					latitude: Lat == 0 ? undefined : Lat,
					longitude:Lng == 0 ? undefined : Lng,
					success: res=> {
						this.Info.Lat=res.latitude;
						this.Info.Lng=res.longitude;
						this.Info.Address=res.address.replace(res.name,'')+res.name;
					},fail(res) {
						console.log(res);
					}
				});
				//#endif
			},
			ChooseImg() {
				uni.chooseImage({
					count: 9, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						var ImgList=[];
						res.tempFilePaths.forEach(item=>{
							ImgList.push(item);
						});
						this.ImgList = this.ImgList.concat(ImgList);
					}
				});
			},
			PrevImg(ImgList, Index){
				uni.previewImage({
				  current: ImgList[Index], // 当前显示图片的http链接
				  urls: ImgList // 需要预览的图片http链接列表
				});
			},
			DeleteImg1(index){
				const self = this
				this.Util.Confirm("您确定要删除吗？",item=>{
					self.OldList.splice(index,1)
				});
			},
			DeleteImg2(index){
				const self = this
				this.Util.Confirm("您确定要删除吗？",item=>{
					self.ImgList.splice(index,1)
				});
			},
			Find_ParkInfo(){
				var data = {};
				data.ID=this.ID;
				data.Act="Find_ParkInfo";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;
					this.UserList1= this.UserList1.concat(json.Data.UserList);
					this.UserList2= this.UserList2.concat(json.Data.UserList);
					this.CarTypeList = json.Data.CarTypeList;
					this.CarColorList = json.Data.CarColorList;
					this.ParkPrint=json.Data.ParkPrint;
					this.ParkWhich=json.Data.ParkWhich;
					this.Chapter = json.Data.Chapter;
					this.IsAdmin=json.Data.IsAdmin;
					this.IsPay=json.Data.IsPay;
					this.IsOutTime = json.Data.IsOutTime;
					if(this.Info.Imgs.Trim()!=''){
						this.OldList=this.Info.Imgs.split(',');
					}
					if(this.ID==0){
						this.Info.ZBRRealName=uni.getStorageSync("ZBRRealName");
						this.Info.XBRRealName=uni.getStorageSync("XBRRealName");
						this.Info.ZBRLawNum=uni.getStorageSync("ZBRLawNum");
						this.Info.XBRLawNum=uni.getStorageSync("XBRLawNum");
					}
				});
			},
			Init_Park(){
				var data = {};
				data.CarNum=this.Info.CarNum;
				data.Act="Init_Park";
				this.Util.Post(data, json=>{
					if(json.Data.Info.CarNum!=""){
						this.Info.Mobile = json.Data.Info.Mobile;
						this.Info.CarColor = json.Data.Info.CarColor;
						this.Info.CarType = json.Data.Info.CarType;
					}
				});
			},
			formSubmit(e){
				var data = e.detail.value;
				data.Act="Save_Park";
				data.ID=this.ID;
				data.ZBRRealName = this.Info.ZBRRealName.replace("请选择主办人","");
				data.XBRRealName = this.Info.XBRRealName.replace("请选择协办人","");
				data.ZBRLawNum = this.Info.ZBRLawNum;
				data.XBRLawNum = this.Info.XBRLawNum;
				uni.setStorageSync("ZBRRealName",data.ZBRRealName);
				uni.setStorageSync("XBRRealName",data.XBRRealName);
				uni.setStorageSync("ZBRLawNum",data.ZBRLawNum);
				uni.setStorageSync("XBRLawNum",data.XBRLawNum);
				if(data.CarNum.Trim()==""){
					this.Util.Toast("请输入车牌号或拍照识别");
					return;
				}
				if(data.Address.Trim()==""){
					this.Util.Toast("请输入或选择违停地点");
					return;
				}
				if(data.Mobile.Trim()!="" && data.Mobile.Trim().length!=11){
					this.Util.Toast("手机号码必须是11位数字");
					return;
				}
				if(this.ImgList.length==0 && this.Info.Imgs==''){
					this.Util.Toast("请上传现场照片");
					return;
				}
				this.Util.Confirm("您确定要提交吗？",()=>{
					this.Util.Loading("请稍候...");
					if(this.ImgList.length>0){
						var ImgList=this.Util.TranList(this.ImgList).reverse();
						this.Util.Upload(ImgList,"upload_file_o",[],list=>{
							data.Imgs = this.OldList.concat(list).join(",");
							this.Save(data);
						});
					}else{
						data.Imgs = this.OldList.join(",");
						this.Save(data);
					}
				});
			},
			Save(data){
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						this.Util.Toast(json.Msg, obj=>{
							uni.$emit("Success","");
							this.ImgList=[];
							if(this.ID==0){
								this.ID=json.Data.Info.ID;
								this.Find_ParkInfo();
							}else{
								this.Find_ParkInfo();
							}
						});
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			},
			Pay(){
				uni.navigateTo({
					url:"parkpay?ID="+this.Info.ID
				})
				/*
				this.Util.Confirm("是否确定缴费？",res=>{
					var data = {};
					data.Act="Pay_Park";
					data.ID=this.ID;
					this.Util.Loading("请稍候...");
					this.Util.Post(data, json=>{
						this.Util.HideLoading();
						if(json.State){
							uni.$emit("PaySuccess", this.ID);
							this.Util.Toast(json.Msg, obj=>{
								this.Find_ParkInfo();
							});
						}else{
							this.Util.Alert(json.Msg);
						}
					});
				});
				*/
			   
			},
			Delete(){
				this.Util.Confirm("是否确定撤销？",res=>{
					var data = {};
					data.Act="Delete_Park";
					data.ID=this.ID;
					this.Util.Loading("请稍候...");
					this.Util.Post(data, json=>{
						this.Util.HideLoading();
						if(json.State){
							this.Util.Toast(json.Msg, obj=>{
								uni.$emit("Success");
								uni.navigateBack();
							});
						}else{
							this.Util.Alert(json.Msg);
						}
					});
				});
			},
			Cancel(){
				this.Util.Confirm("是否确定撤销？",res=>{
					var data = {};
					data.Act="Cancel_Park";
					data.ID=this.ID;
					this.Util.Loading("请稍候...");
					this.Util.Post(data, json=>{
						this.Util.HideLoading();
						if(json.State){
							this.Util.Toast(json.Msg, obj=>{
								uni.$emit("Success");
								uni.navigateBack();
							});
						}else{
							this.Util.Alert(json.Msg);
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.group{width:100%; height:80rpx; line-height: 80rpx; padding-left:30rpx; font-size:32rpx; margin-top:25rpx; color:#3d7dfd; background-color: #ffffff;
		.number{color:#000000; padding-right:30rpx; float:right;}
		.resign{color:#00c1a8; padding-right:30rpx; float:right;}
	}
	label{width:auto; margin-right: 20rpx; display: flex; flex-direction: row; .r1{margin-top:-2rpx;}}
	radio{transform:scale(0.8);}
	.icon{width:60rpx; height:100rpx; image{border-radius:0rpx; width:60rpx; height: 60rpx; margin-top:20rpx;}}
	.line{font-size:34rpx; .datatime{color:#a9a8a8 !important;}}
	.imglist{width:100%; height:auto; padding-bottom: 20rpx; padding-left:30rpx; background-color: #ffffff; display: flex; flex-direction: row; flex-wrap: wrap;
		.img{width:150rpx; height:150rpx; position: relative; margin-left:30rpx; margin-bottom:20rpx;
			.delete{width:40rpx; height:40rpx; position:absolute; right:-15rpx; top:-15rpx;}
			image{width:100%; height: 100%; border-radius: 0rpx;}
		}
		.img:nth-child(4n-3){margin-left:0rpx;}
		.bd{border:1rpx solid #bfbfbf;}
	}
	.signlist{width:100%; height:auto; position: relative; overflow:hidden; padding-bottom: 20rpx; padding-left:10rpx; background-color: #ffffff;
		image{width:500rpx; height:200rpx;}
	}
	.square{width:100%; height:auto; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; padding:30rpx; padding-top:60rpx;
		.list{width:120rpx; height:70rpx; line-height:70rpx; font-size:32rpx; text-align: center; margin-bottom: 30rpx; border:1rpx solid #cdcdcd;}
		.list:nth-child(5n){margin-right:0rpx;}
		.list:active{background-color: #3d7dfd; border:1rpx solid #3d7dfd; color:#ffffff;}
	}
	.signname{width:100%; height:150rpx; line-height: 100rpx; border:0rpx; border-radius: 0rpx; text-align: center; color:#a8a8a8; font-size:40rpx;}
	.deletes{width:150rpx; height:100rpx; line-height: 100rpx; background-color: #b78f02; border:0rpx; border-radius: 0rpx; text-align: center; color:#ffffff; font-size:34rpx;}
	.pay{width:150rpx; height:100rpx; line-height: 100rpx; background-color: #ee041a; border:0rpx; border-radius: 0rpx; text-align: center; color:#ffffff; font-size:34rpx;}
	.print{flex:1; flex-grow: 2; width:150rpx; height:100rpx; line-height: 100rpx; background-color: #41a863; border:0rpx; border-radius: 0rpx; text-align: center; color:#ffffff; font-size:34rpx;}
	.gray,input{color:#a9a8a8 !important;}
	
</style>
